<template>
  <div class="demo">
    <div class="demo-title">自定义 label、value、options 字段</div>
    <div class="demo-content">
      <Select
        ref="select"
        v-model:value="value"
        style="width: 120px"
        :options="options"
        :field-names="{ label: 'name', value: 'id', options: 'children' }"
        @focus="focus"
        @change="handleChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Select from '@sscd/select';
  import type { SelectProps } from '@sscd/select';
  const value = ref('lucy');
  const options = ref<SelectProps['options']>([
    {
      id: 'jack',
      name: 'Jack',
      children: [{ id: 'small jack', name: 'samll Jack' }],
    },
    { id: 'lucy', name: 'Lucy' },
    { id: 'disabled', name: 'Disabled', disabled: true },
    { id: 'yiminghe', name: 'Yiminghe' },
  ]);
  const focus = () => console.log('focus');
  const handleChange = (val: string) => console.log(`selected ${val}`);
</script>
